/**
* Created by xudesong on 2019/1/14.
*/

<template>
    <div class="message">
        <span class="demonstration">这是儿子组件 Message</span>
        <ul id="example-1">
            <li v-for="item in messageData" :key="item.id" v-on:click="goMessageItem(item)">
                {{ item.messageitem }}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
    import Component from 'vue-class-component'
    @Component
    export default class Message extends Vue{
        @Prop() age!:number;
        @Model("change") checked!:number;
        messageData:Object= [
            { id:"11",messageitem: 'Foo第一个',desc:"详情111详情111详情111详情111详情111详情111" },
            { id:"22",messageitem: 'Bar第二个',desc:"详情222详情222详情222详情222详情222详情222详情222" },
            { id:"33",messageitem: 'Bar第三个',desc:"详情333详情333详情333详情333详情333详情333详情333" },
            { id:"44",messageitem: 'Bar第四个',desc:"详情444详情444详情444详情444详情444详情444详情444" },
            { id:"55",messageitem: 'Bar第五个',desc:"详情555详情555详情555详情555详情555详情555详情555" },
        ];
        goMessageItem(item){ /* 这里是偷懒写的any，在实际项目中需要避免 */
            console.log( "goMessageItem.: item ",item.id);
            this.$router.push({  //核心语句
                path:'/messageItem',   //跳转的路径
                query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                    id:item.id ,
                    item:item ,
                }
            });
        }
    }
</script>

<style scoped lang="scss">
    .message{
        width: 100%;
        height: 500px;
        background-color: gainsboro;
        .demonstration{
            color: red;
        }
    }
</style>